<template>
  <div
    style="width: 900px;padding-top: 15px;min-height: 650px;display: flex;flex-direction: column;justify-content: space-between">

    <div>
      <el-tabs v-model="activeName" @tab-click="tableClick">
        <el-tab-pane label="基本信息" name="first">
          <div>
            <MmvTitle slot="title" title="车辆信息"></MmvTitle>
            <el-descriptions :column="2" border size="small">
              <el-descriptions-item label-class-name="my-descriptions-label" label="车牌号">{{ nowCar.carNo ||
                '--' }}</el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" label="车架号">{{ nowCar.vinNo ||
                '--' }}</el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" label="车型信息">{{ nowCar.carInfo ||
                '--' }}</el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" label="车辆状态">
                <dict-tag :options="dict.type.car_status" :value="nowCar.carStatus" />
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" label="油量" v-if="fuelType !== null">
                {{ oilQuantity }}
                <span v-if="fuelType == '1'">%</span>
                <span v-if="fuelType == '0'">升</span>
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" label="电量" v-if="batteryType !== null">
                {{ electricity }}
                <span v-if="batteryType == '1'">%</span>
                <span v-if="batteryType == '0'">千瓦</span>
              </el-descriptions-item>
            </el-descriptions>
            <el-divider></el-divider>

            <div>
              <MmvTitle slot="title" title="设备信息"></MmvTitle>
              <el-descriptions :column="3" border v-for="(item, i) in deviceList" :key="i" style="margin-bottom: 20px"
                size="small">
                <template v-if="item.gpsStatus && item.manufacturer == 4 && item.dxPosition">
                  <el-descriptions-item label-class-name="my-descriptions-label" label="设备编号"><b
                      style="font-size: 16px">{{ item.deviceNo || '--' }}</b></el-descriptions-item>
                  <!--                  <el-descriptions-item label-class-name="my-descriptions-label" label="设备id">{{item.dxPosition.userId || '&#45;&#45;'}}</el-descriptions-item>-->
                  <el-descriptions-item label-class-name="my-descriptions-label" label="设备名称">{{
                    item.dxPosition.userName
                    || '--' }}</el-descriptions-item>
                  <el-descriptions-item label-class-name="my-descriptions-label" label="sim卡">{{ item.dxPosition.sim ||
                    '--' }}</el-descriptions-item>

                  <el-descriptions-item label-class-name="my-descriptions-label" label="设备状态">{{
                    { 1: '行驶', 2: '静止', 3: '离线', 4: '报警', 5: '' }[item.deviceSubStatus || 5] }}</el-descriptions-item>
                  <el-descriptions-item label-class-name="my-descriptions-label" label="静止时间">{{ item.deviceSubStatus ==
                    2 ? getRestTime(item.dxPosition.serverTime, item.dxPosition.datetime) : '--'
                    }}</el-descriptions-item>
                  <el-descriptions-item label-class-name="my-descriptions-label" label="离线时间">{{ item.deviceSubStatus ==
                    3 ? getRestTime(item.dxPosition.serverTime, item.dxPosition.heartTime) : '--'
                    }}</el-descriptions-item>

                  <el-descriptions-item label-class-name="my-descriptions-label" label="设备定位时间">{{
                    item.dxPosition.sysTime || '--' }}</el-descriptions-item>
                  <el-descriptions-item label-class-name="my-descriptions-label" label="速度">{{ item.dxPosition.su ||
                    '--' }} Km/h</el-descriptions-item>
                  <el-descriptions-item label-class-name="my-descriptions-label" label="acc状态">{{ {
                    0: '关', 1: '开'
                  }[getStatus(item.dxPosition.status)[0]] || '--' }}</el-descriptions-item>


                  <!--
                  <el-descriptions-item label-class-name="my-descriptions-label" label="数据更新时间">{{item.dxPosition.datetime || '&#45;&#45;'}}</el-descriptions-item>
-->
                  <!--
                  <el-descriptions-item label-class-name="my-descriptions-label" label="方向">{{item.dxPosition.hangxiang || '&#45;&#45;'}}°</el-descriptions-item>
-->
                  <el-descriptions-item label-class-name="my-descriptions-label" label="设备心跳时间">{{
                    item.dxPosition.heartTime || '--' }}</el-descriptions-item>
                  <el-descriptions-item label-class-name="my-descriptions-label" label="主电状态">{{ {
                    0: '断开', 1: '接通'
                  }[getStatus(item.dxPosition.status)[6]] || '--' }}</el-descriptions-item>

                  <!--
                  <el-descriptions-item label-class-name="my-descriptions-label" label="高度">{{getStatenumber(item.dxPosition.statenumber)[14] || '&#45;&#45;'}}</el-descriptions-item>
-->
                  <el-descriptions-item label-class-name="my-descriptions-label" label="油电开关">{{ {
                    0: '关', 1: '开'
                  }[getStatus(item.dxPosition.status)[2]] || '--' }}</el-descriptions-item>



                  <!--
                  <el-descriptions-item label-class-name="my-descriptions-label" label="系统时间">{{item.dxPosition.serverTime || '&#45;&#45;'}}</el-descriptions-item>
-->
                  <el-descriptions-item label-class-name="my-descriptions-label" label="里程">{{
                    parseInt(getStatenumber(item.dxPosition.statenumber)[0]) ||
                    '--' }}KM</el-descriptions-item>
                  <!--
                  <el-descriptions-item label-class-name="my-descriptions-label" label="充电状态">{{{ 0: '关', 1: '开' }[getStatus(item.dxPosition.status)[3]] || '&#45;&#45;'}}</el-descriptions-item>
-->

                  <!--
                  <el-descriptions-item label-class-name="my-descriptions-label" label="到期时间">{{item.dxPosition.expireDate || '&#45;&#45;'}}</el-descriptions-item>
-->
                  <!--
                  <el-descriptions-item label-class-name="my-descriptions-label" label="电量">{{item.dxPosition.electric || '&#45;&#45;'}}</el-descriptions-item>
-->
                  <!--
                  <el-descriptions-item label-class-name="my-descriptions-label" label="车门状态">{{{ 0: '关', 1: '开' }[getStatus(item.dxPosition.status)[4]] || '&#45;&#45;'}}</el-descriptions-item>
-->




                  <el-descriptions-item label-class-name="my-descriptions-label" label="主电源电压">{{
                    getStatenumber(item.dxPosition.statenumber)[5] || '--' }}V</el-descriptions-item>
                  <!--
                  <el-descriptions-item label-class-name="my-descriptions-label" label="定位状态">{{{ 0: '未定位', 1: '定位' }[getStatus(item.dxPosition.status)[5]] || '&#45;&#45;'}}</el-descriptions-item>
-->



                  <el-descriptions-item label-class-name="my-descriptions-label" label="备用电池电量">{{
                    getStatenumber(item.dxPosition.statenumber)[4] || '--' }}</el-descriptions-item>
                  <!--
                  <el-descriptions-item label-class-name="my-descriptions-label" label="龙锁数">{{getStatenumber(item.dxPosition.statenumber)[10] || '&#45;&#45;'}}</el-descriptions-item>
-->

                  <el-descriptions-item label-class-name="my-descriptions-label" label="定位信号类型">{{ {
                    0: '北斗GPS', 1:
                      'WIFI定位', 2: '基站定位'
                  }[getStatenumber(item.dxPosition.statenumber)[15]] ||
                    '--' }}</el-descriptions-item>
                  <el-descriptions-item label-class-name="my-descriptions-label" label="GPS颗数">{{
                    getStatenumber(item.dxPosition.statenumber)[6] || '--' }}</el-descriptions-item>
                  <el-descriptions-item label-class-name="my-descriptions-label" label="gsm信号强度">{{
                    getStatenumber(item.dxPosition.statenumber)[7] || '--' }}</el-descriptions-item>


                  <!--       <el-descriptions-item label-class-name="my-descriptions-label" label="设备自身设防状态">{{{ 0: '撤防', 1: '设防' }[getStatus(item.dxPosition.status)[1]] || '--'}}</el-descriptions-item>
                        <el-descriptions-item label-class-name="my-descriptions-label" label="平台设防状态">{{{ 0: '撤防', 1: '设防' }[getStatus(item.dxPosition.status)[6]] || '--'}}</el-descriptions-item>
                        <el-descriptions-item label-class-name="my-descriptions-label" label="平台隐身状态">{{{ 0: '关', 1: '隐身' }[getStatus(item.dxPosition.status)[6]] || '--'}}</el-descriptions-item>
                       <el-descriptions-item label-class-name="my-descriptions-label" label="车架号">{{getStatenumber(item.dxPosition.statenumber)[1] || '&#45;&#45;'}}</el-descriptions-item>-->
                  <el-descriptions-item span="3" label-class-name="my-descriptions-label" label="最后上报地址">{{
                    item.dxPosition.address || '--' }}</el-descriptions-item>
                  <!--
                  <el-descriptions-item span="3" label-class-name="my-descriptions-label" label="基站或wifi经度/纬度">{{item.dxPosition.laddress || '&#45;&#45;'}}</el-descriptions-item>
-->
                </template>
                <template v-else>
                  <el-descriptions-item label-class-name="my-descriptions-label" label="设备编号"><b
                      style="font-size: 16px">{{ item.deviceNo || '--' }}</b></el-descriptions-item>
                  <el-descriptions-item label-class-name="my-descriptions-label" label="SIM卡号">{{ item.simCard ||
                    '--' }}</el-descriptions-item>
                  <el-descriptions-item label-class-name="my-descriptions-label" label="最近上报时间">{{ item.timeReported ||
                    '--' }}</el-descriptions-item>
                  <el-descriptions-item label-class-name="my-descriptions-label" label="最近上报地址" span="2">{{
                    item.addrDetail || '--' }}</el-descriptions-item>
                  <el-descriptions-item label-class-name="my-descriptions-label" label="里程">{{ item.useMileage || '--'
                    }}KM</el-descriptions-item>
                </template>

                <el-descriptions-item label-class-name="my-descriptions-label" label="操作" span="3">
                  <el-button size="small" type="text" @click="handleTrackAnimation(item)">查看轨迹</el-button>
                  <el-button size="small" type="text" v-if="1 === item.deviceKind"
                    @click="handleTrace(item)">实时跟踪</el-button>
                  <!--                  <el-button size="small" type="text" v-if="1 === item.deviceKind" @click="handleOrder(item)">下发指令</el-button>-->
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="当前订单信息" v-if="nowCar.orderStatus === 4" name="second">
          <div>

            <MmvTitle slot="title" title="订单信息"></MmvTitle>
            <el-descriptions :column="2" border>
              <el-descriptions-item label-class-name="my-descriptions-label" label="订单来源">
                <dict-tag :options="dict.type.sys_order_source" :value="nowCar.orderSource" />
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" label="订单编号">{{ nowCar.orderNo ||
                '--' }}</el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" label="预约取还车时间">
                {{ nowCar.rentalStartTime }}~{{ nowCar.rentalEndTime }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" label="实际取还车时间">
                {{ nowCar.actualStartTime }}~{{ nowCar.actualEndTime }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" label="预约取还车门店">
                {{ nowCar.reserveTakeStoreName }}~{{ nowCar.reserveAlsoStoreName }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" label="实际取还车门店">
                {{ nowCar.takeStoreName }}
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" label="预定车型">{{ nowCar.modelName ||
                '--' }}</el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" label="实际车型">{{ nowCar.actualModelName ||
                '--' }}</el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" label="订单状态" :span="2">
                <dict-tag :options="dict.type.sys_order_status" :value="nowCar.orderStatus" />
              </el-descriptions-item>
            </el-descriptions>
            <el-divider></el-divider>

            <MmvTitle slot="title" title="客户信息"></MmvTitle>
            <el-descriptions :column="2" border>
              <template slot="extra">
                <el-button type="primary" size="small" @click="queryCredit">反欺诈查询</el-button>
              </template>
              <el-descriptions-item label-class-name="my-descriptions-label" label="客户名称">{{ nowCar.orderMemberName ||
                '--' }}</el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" label="客户类型">{{ 1 === nowCar.memberType ?
                '企业' : 2
                  === nowCar.memberType ? '个人' : '' }}</el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" label="联系人">{{ nowCar.memberName ||
                '--' }}</el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" label="联系电话">{{ nowCar.contactPhone ||
                '--' }}</el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label" label="联系地址" :span="2">{{
                nowCar.contactAddress ||
                '--' }}</el-descriptions-item>
            </el-descriptions>

          </div>
        </el-tab-pane>

        <el-tab-pane label="告警记录" name="third">
          <el-radio-group v-model="radio" @input="radioChanged" size="small">
            <el-radio label="1">全部</el-radio>
            <el-radio label="2">当前订单触发</el-radio>
          </el-radio-group>
          <div style="height: 20px"></div>
          <el-table max-height="380px" :data="warnlist" border>
            <el-table-column width="150px" label="告警类型" prop="alarmName" />
            <el-table-column width="300px" label="告警地址" prop="address" />
            <el-table-column width="160px" label="告警时间" prop="alarmTime" />
            <el-table-column label="关联订单" prop="orderNo" />
            <el-table-column align="center" label="处理状态" prop="processingStatus">
              <template v-slot="scope">
                {{ 1 == scope.row.processingStatus ? '未处理' : 2 == scope.row.processingStatus ? '已处理' : '' }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="已读状态" prop="readStatus">
              <template v-slot="scope">
                {{ 1 == scope.row.readStatus ? '已读' : 2 == scope.row.readStatus ? '未读' : '' }}
              </template>
            </el-table-column>
          </el-table>
          <div style="height: 20px"></div>
          <pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
            @pagination="getAlarmList" />
        </el-tab-pane>
      </el-tabs>
    </div>

    <!--        <div style="flex: 1"></div>-->
    <div style="margin-bottom: 20px" v-if="false">
      <el-button @click="handleTrackAnimation">查看轨迹</el-button>
      <el-button v-if="1 === nowCar.deviceKind" @click="handleTrace">实时跟踪</el-button>
      <!--        <el-button @click="showzhilin = true" v-if="nowCar.manufacturer==1">发送指令</el-button>-->
      <!--      <el-button v-if="1 === nowCar.deviceKind" @click="handleOrder">下发指令</el-button>-->
    </div>

  </div>
</template>

<script>
import { alarmlist } from "@/api";
import { carBindInformationList, carOilQuantityt } from '@/api/car/car_basic'
import * as MmvApi from '@/api/mmv'
import MmvTitle from "@/components/MmvUI/MmvTitle";
export default {
  name: "carinfo-dialog",
  components: {
    MmvTitle
  },
  props: {
    nowCar: {}
  },
  data() {
    return {
      oilQuantity: null, // 油量
      electricity: null, // 电量
      fuelType: null, // 是否显示油量
      batteryType: null, // 是否显示电量
      deviceLoading: false,
      deviceList: [],
      radio: '2',
      activeName: 'first',
      warnlist: [
        {
          name: '拆除',
          address: '省市区',
          time: '123',
          orderNo: '123123123123',
          handleState: '未处理',
          readState: '未读'
        },
        {
          name: '拆除',
          address: '省市区',
          time: '123',
          orderNo: '123123123123',
          handleState: '未处理',
          readState: '未读'
        },
      ],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      orderNo: null
    }
  },
  dicts: ['car_status', 'sys_order_source', 'manufacturer', 'sys_order_status',],
  mounted() {
    this.orderNo = this.nowCar.orderNo ? this.nowCar.orderNo : '-1';
    this.getAlarmList()
    this.carOilQuantity()
  },
  methods: {
    carOilQuantity() {
      carOilQuantityt({ id: this.nowCar.carId }).then((res) => {
        if (res.data) {
          this.oilQuantity = res.data.fuelLevel
          this.fuelType = res.data.fuelType
          this.electricity = res.data.batteryLevel
          this.batteryType = res.daya.batteryType
        }
      })
    },
    tableClick(event) {
      if (event.name == 'third') {
        this.getAlarmList()
      }
    },
    getStatus(gpsStatus) {
      return gpsStatus.split("");
    },
    getStatenumber(statenumber) {
      return statenumber.split(",");
    },
    getRestTime(startTime, endTime) {
      console.log("getRestTimegetRestTime")
      var cha = new Date(startTime).getTime() - new Date(endTime).getTime();
      var day = Math.floor(cha / (24 * 3600 * 1000));
      var hours = Math.floor(cha % (24 * 3600 * 1000) / (3600 * 1000));
      var minutes = Math.floor(cha % (24 * 3600 * 1000) % (3600 * 1000) / (60 * 1000));
      var seconds = Math.floor(cha % (24 * 3600 * 1000) % (3600 * 1000) % (60 * 1000) / 1000);
      var s1 = "";

      if (day >= 1) {
        s1 += day + "天"
      }
      if (hours >= 1) {
        s1 += hours + "小时";
      }
      if (minutes > 0) {
        s1 += minutes + "分钟";
      }
      if (seconds > 0) {
        s1 += seconds + "秒";
      }
      console.log(s1)
      return s1;

    },
    // 获取车辆绑定设备列表&用车中高频上报地址
    getBindDeviceList() {
      this.deviceLoading = true;
      this.deviceList = [];
      this.carOilQuantity()
      carBindInformationList(this.nowCar.carId).then(res => {
        this.deviceLoading = false;
        this.deviceList = res.data;
        if (this.deviceList && this.deviceList.length > 0) {
          // 获取用车中高频上报地址(单接口)
          for (let deviceItem of this.deviceList) {
            if (this.nowCar.orderStatus === 4 && 2 === deviceItem.deviceKind) {
              MmvApi.reportingAddress({
                orderNo: this.nowCar.orderNo,
                deviceNo: deviceItem.deviceNo,
              }).then(res => {
                if (200 === res.code) {
                  // this.highRecortAddress = res.msg
                  this.$set('deviceItem', 'highRecortAddress', res.msg);
                }
              })
            }
          }
        }
      })
    },

    handleTrackAnimation(deviceInfo) {
      this.$emit('handleTrackAnimation', deviceInfo)
    },
    handleTrace(deviceInfo) {
      this.$emit('handleTrace', deviceInfo)
    },
    handleOrder(deviceInfo) {
      this.$emit('handleOrder', deviceInfo)
    },

    getAlarmList() {
      alarmlist({
        orderNo: this.orderNo,
        imei: this.nowCar.deviceNo,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.warnlist = res.rows
        this.total = res.total
      })
    },

    radioChanged(val) {
      console.log(this.nowCar, 111111)
      console.log(val, 11111111)
      if (1 == val) {
        this.orderNo = null
      } else {
        this.orderNo = this.nowCar.orderNo ? this.nowCar.orderNo : '-1'
      }
      this.pageNum = 1
      this.getAlarmList()
    },

    queryCredit() {
      this.$router.push({
        name: 'creditAdd',
        query: {
          type: 1,
          memberNo: this.nowCar.memberNo
        }
      })
    }
  }
}
</script>

<style scoped>
/deep/ .my-descriptions-label {
  width: 130px !important;
  text-align: left !important;
}
</style>
